<template>
	<div class="app" :style="{width: $store.state.menu.device.width+'px', height: $store.state.menu.device.height+'px'}">
		<HQSilder></HQSilder>
		<HQContent></HQContent>
	</div>
</template>

<script>
	import HQSilder from "./slider";
	import HQContent from "./content";
	import { mapMutations } from 'vuex';
	export default {
		name: "Main",
		components: {
			HQSilder,
			HQContent
		},
		methods: {
			...mapMutations([
				'setDevice',
			]),
			screenSize() {
				// 进入页面重新获取屏幕可视高度
				var winheight = document.documentElement.clientHeight
				var winwidth = document.documentElement.clientWidth

				winheight < 700 ? winheight = 700 : ''
				winwidth < 1140 ? winwidth = 1140 : ''

				this.setDevice({
					width: winwidth,
					height: winheight
				})
			}
		},
		mounted() {
			this.screenSize()
			window.onresize = (()=>{
				this.screenSize()
			})
		}
	};
</script>